<template>
  <div class="community-page">
    <!-- 顶部导航栏 -->
    <header class="community-header">
      <div class="header-container">
        <!-- Logo和品牌名称 -->
        <div class="brand">
          <router-link to="/" class="brand-logo">
            <img src="@/assets/logo.png" alt="Logo">
            <span>E特尔诺社区</span>
          </router-link>
        </div>

        <!-- 主导航菜单 -->
        <nav class="main-nav">
          <router-link 
            v-for="nav in mainNavs" 
            :key="nav.path"
            :to="nav.path"
            class="nav-item"
          >
            <i :class="nav.icon"></i>
            {{ nav.name }}
            <span v-if="nav.badge" class="nav-badge">{{ nav.badge }}</span>
          </router-link>
        </nav>

        <!-- 右侧功能区 -->
        <div class="header-actions">
          <!-- 搜索框 -->
          <div class="search-box">
            <i class="el-icon-search"></i>
            <input 
              type="text" 
              placeholder="搜索文章/问答/用户..."
              v-model="searchQuery"
              @focus="showSearchPanel = true"
              @blur="hideSearchPanel"
            >
          </div>

          <!-- 创作按钮 -->
          <button class="create-btn" @click="showCreateMenu = !showCreateMenu">
            <i class="el-icon-plus"></i>
            创作
          </button>

          <!-- 通知图标 -->
          <div class="notification-icon" @click="toggleNotifications">
            <i class="el-icon-bell"></i>
            <span v-if="unreadCount" class="notification-badge">{{ unreadCount }}</span>
          </div>

          <!-- 用户菜单 -->
          <div class="user-menu" v-if="isLoggedIn">
            <div class="avatar-wrapper" @click="toggleUserMenu">
              <el-avatar :src="currentUser.avatar" :size="40"></el-avatar>
              <i class="el-icon-arrow-down"></i>
            </div>
          </div>
          <button v-else class="login-btn" @click="showLoginModal">
            登录/注册
          </button>
        </div>
      </div>
    </header>

    <!-- 分类导航 -->
    <nav class="category-nav">
      <div class="nav-container">
        <div class="category-list">
          <router-link 
            v-for="category in categories" 
            :key="category.id"
            :to="category.path"
            class="category-item"
          >
            <i :class="category.icon"></i>
            {{ category.name }}
            <span v-if="category.count" class="category-count">{{ category.count }}</span>
          </router-link>
        </div>
      </div>
    </nav>

    <!-- 主要内容区 -->
    <main class="community-main">
      <router-view></router-view>
    </main>
  </div>
</template>

<script>
export default {
  name: 'DeveloperCommunity',
  
  data() {
    return {
      // 主导航数据
      mainNavs: [
        { path: '/community/home', name: '首页', icon: 'el-icon-s-home' },
        { path: '/community/articles', name: '文章', icon: 'el-icon-document' },
        { path: '/community/questions', name: '问答', icon: 'el-icon-question', badge: '99+' },
        { path: '/community/resources', name: '资源', icon: 'el-icon-folder' },
        { path: '/community/activities', name: '活动', icon: 'el-icon-date' }
      ],

      // 分类数据
      categories: [
        { id: 'frontend', name: '前端开发', icon: 'el-icon-s-home', path: '/community/frontend', count: 1234 },
        { id: 'backend', name: '后端开发', icon: 'el-icon-server', path: '/community/backend', count: 890 },
        { id: 'mobile', name: '移动开发', icon: 'el-icon-mobile-phone', path: '/community/mobile', count: 567 },
        { id: 'ai', name: '人工智能', icon: 'el-icon-brain', path: '/community/ai', count: 345 },
        { id: 'devops', name: 'DevOps', icon: 'el-icon-tools', path: '/community/devops', count: 234 },
        { id: 'security', name: '安全', icon: 'el-icon-shield', path: '/community/security', count: 123 }
      ],

      // 视图模式
      viewModes: [
        { id: 'card', icon: 'el-icon-th-large' },
        { id: 'list', icon: 'el-icon-list' },
        { id: 'compact', icon: 'el-icon-menu' }
      ],
      currentView: 'card',

      // 搜索相关
      searchQuery: '',
      showSearchPanel: false,
      trendingSearches: [
        { id: 1, name: 'Vue3最佳实践' },
        { id: 2, name: 'React Hooks' },
        { id: 3, name: 'TypeScript教程' },
        { id: 4, name: 'Docker入门' },
        { id: 5, name: '微服务架构' }
      ],
      searchHistory: [
        { id: 1, keyword: 'API设计规范' },
        { id: 2, keyword: 'Spring Boot' },
        { id: 3, keyword: '前端性能优化' }
      ],

      // 用户相关
      isLoggedIn: true,
      currentUser: {
        name: '张三',
        avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=dev1',
        level: 3,
        points: 1280
      },
      unreadCount: 5,

      // 弹窗控制
      showCreateMenu: false,
      showLoginModal: false,
      showUserMenu: false,
      showNotifications: false
    }
  },

  methods: {
    // ... 其他方法保持不变
  }
}
</script>

<style scoped>
/* 基础样式 */
.community-page {
  min-height: 100vh;
  background: #f8f9fa;
}

/* 顶部导航栏 */
.community-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.header-container {
  max-width: 1400px;
  height: 100%;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 品牌区域 */
.brand-logo {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: #1a237e;
}

.brand-logo img {
  height: 36px;
  width: auto;
}

.brand-logo span {
  font-size: 1.25rem;
  font-weight: 600;
}

/* 主导航菜单 */
.main-nav {
  display: flex;
  gap: 2rem;
  margin: 0 2rem;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #666;
  text-decoration: none;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  transition: all 0.3s ease;
  position: relative;
}

.nav-item:hover {
  color: #1a237e;
  background: rgba(26, 35, 126, 0.05);
}

.nav-item.active {
  color: #1a237e;
  background: rgba(26, 35, 126, 0.1);
}

.nav-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #f44336;
  color: white;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 20px;
  font-weight: 500;
}

/* 右侧功能区 */
.header-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* 搜索框 */
.search-box {
  position: relative;
  width: 300px;
}

.search-box input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.5rem;
  border: 1px solid #e0e7ff;
  border-radius: 8px;
  background: #f8f9fa;
  transition: all 0.3s ease;
}

.search-box input:focus {
  outline: none;
  border-color: #1a237e;
  background: white;
  box-shadow: 0 0 0 3px rgba(26, 35, 126, 0.1);
}

.search-box i {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
}

/* 创作按钮 */
.create-btn {
  padding: 0.75rem 1.5rem;
  background: #1a237e;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
}

.create-btn:hover {
  background: #0d47a1;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(26, 35, 126, 0.2);
}

/* 通知图标 */
.notification-icon {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #f44336;
  color: white;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 20px;
  font-weight: 500;
}

/* 用户菜单 */
.user-menu {
  position: relative;
}

.avatar-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.avatar-wrapper:hover {
  background: #f8f9fa;
}

/* 分类导航 */
.category-nav {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  height: 56px;
  background: white;
  border-bottom: 1px solid #eee;
  z-index: 999;
}

.nav-container {
  max-width: 1400px;
  height: 100%;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
}

.category-list {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.category-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #666;
  text-decoration: none;
  white-space: nowrap;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.category-item:hover {
  color: #1a237e;
  background: rgba(26, 35, 126, 0.05);
}

.category-item.active {
  color: #1a237e;
  background: rgba(26, 35, 126, 0.1);
}

/* 主要内容区 */
.community-main {
  margin-top: 120px;
  padding: 2rem;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .header-container,
  .nav-container {
    padding: 0 1rem;
  }
  
  .search-box {
    width: 200px;
  }
  
  .main-nav {
    gap: 1rem;
  }
}

@media (max-width: 768px) {
  .main-nav {
    display: none;
  }
  
  .search-box {
    display: none;
  }
  
  .create-btn span {
    display: none;
  }
  
  .category-nav {
    overflow-x: auto;
  }
}
</style>
